<template>
  <el-dialog
    title="选择店员"
    class="product-dialog"
    append-to-body
    width="700px"
    @close="closeEvt"
    :visible.sync="show"
  >
    <page-layout>
      <template v-slot:header>
        <el-input
          v-model="query.name"
          placeholder="输入名字查询"
          size="small"
        />
        <el-button type="primary" size="small" @click="queryEvt">查询</el-button
        >
      </template>

      <el-table
        :data="tableData"
        style="width: 100%"
        height="100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        size="small"
      >
        <el-table-column type="selection" width="55" fixed />

        <el-table-column prop="id" label="用户编码" width="300" />

        <el-table-column prop="name" label="用户名字" width="300" />
        <!-- <el-table-column label="操作" width="200"> -->
        <!-- <el-checkbox v-model="checked" @click="checkEvt(row)">选择</el-checkbox> -->
        <!-- </el-table-column> -->
      </el-table>

      <template v-slot:footer>
        <el-pagination
          :page-sizes="[20, 50, 100, 150]"
          :page-size="query.size"
          :current-page="query.page"
          @size-change="sizeChange"
          @current-change="currentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </template>
    </page-layout>
    <template v-slot:footer>
      <el-button size="small" @click="closeEvt">取 消</el-button>
      <el-button size="small" type="primary" @click="confirmEvt"
        >确 定</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
import { shopListApi, userListApi } from "@/apis/shopApi";
export default {
  props: {
    value: {
      type: Boolean,
      required: true,
    },
    checkClark: {
      type: Array,
    },
  },

  watch: {
    value(val) {
      this.show = val;
    },
  },

  data() {
    return {
      show: false,
      tableData: [],
      total: 0,
      checked: false,
      query: {
        name: "",
        page: 1,
        size: 20,
      },
      changeTimer: null,
      selectedRows: [],

      timer: null,
      loading: true,
    };
  },

  mounted() {
    this.getUserList()
  },


  methods: {
    confirmEvt() {
      this.$emit("clerkSelectEvt", this.selectedRows);
      this.$emit("input", false);
    },
    closeEvt() {
      this.$emit("input", false);
    },
    queryEvt() {
      this.query.page = 1;
      this.getUserList();
    },

    async getUserList() {
      this.loading = true;
      let result = await userListApi(this.query);
      if (result.code === 200) {
        this.tableData = result.data.rows;
        this.total = result.data.count;

        setTimeout(() => {
          if (!!this.$refs.multipleTable) {
            this.selectedRows.forEach((it) => {
              // 在tableData数据中找到当前行数据，然后调用方法设置被选中
              let row = this.tableData.find((oo) => oo.id === it.id);
              // 因为调用toggleRowSelection方法会触发表格的@selection-change事件，会导致赋值错误
              // 所以可以这样做，在页面切换就是发送页面请求初始化调用toggleRowSelection，不要给selectedRows数据赋值
              if (!!row) this.$refs.multipleTable.toggleRowSelection(row, true);
            });
          }

          // 设置页面选中状态，并且完成渲染之后再把节流标识放开
          setTimeout(() => {
            this.loading = false;
          }, 100);
        });
      }
    },
    fd() {
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.getList();
      }, 100);
    },
    sizeChange(size) {
      this.query.size = size;
      if (this.changeTimer) clearTimeout(this.changeTimer);
      this.changeTimer = setTimeout(() => {
        this.getUserList();
      }, 100);
    },

    currentChange(page) {
      this.query.page = page;
      if (this.changeTimer) clearTimeout(this.changeTimer);
      this.changeTimer = setTimeout(() => {
        this.getUserList();
      }, 100);
    },
    handleSelectionChange(rows) {
      // 这里发生变化的时候，要注意，如果selectedRow包含了数据，但是rows里边没有这条数据了，那么表示这条数据被删除了
      // 一定要注意，这条数据一定是当前页的数据
      // 把本页的所有选中的数据先删除掉
      if (!this.loading) {
        this.tableData.forEach((it) => {
          let idx = this.selectedRows.findIndex((oo) => oo.id === it.id);
          if (idx > -1) this.selectedRows.splice(idx, 1);
        });
        this.selectedRows = this.selectedRows.concat(rows);
      }
      this.$emit("clerkSelectEvt", rows);
    },
  },
};
</script>